<template>
    <div class="set-makeup">
        <div class="search_box">
            选择妆类: <select v-model="params.cat">
                <option v-for="cat in cats" v-bind:value="cat.type">{{cat.name}}</option>
            </select>
        <!--商品id<input type="text" placeholder="按类别ID进行搜索" class="input-one" v-model="params.itemId">-->
            商品名称: <input type="text" placeholder="按商品名进行搜索" class="input-one" v-model="params.keyWord">
            <button @click="search()">搜索</button>
        </div>
        <div style="clear:both;"></div>

        <div class="panel panel-default">
            <!-- Table -->
            <table class="items-list table table-hover table-bordered">
                <thead>
                <tr>
                    <td>商品信息</td>
                    <td>试妆数据</td>
                    <td>排序(数值小,靠前)</td>
                    <td>推荐</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody  >
                    <tr v-for="(item,index) in items.list">
                        <td>
                            <div class="item">
                                <img :src="item.item_imgs.split(';')[0]">
                                <div class="details">
                                    <p>商品id: {{item.item_id}}</p>
                                    <p>SKUid: {{item.sku_id}}</p>
                                    <p class="item_title" >商品名称:
                                        <a target="_blank" :href="['//detail.tmall.com/item.htm?id='+item.item_id]">{{decodeURIComponent(item.item_title)}}

                                        </a>
                                    </p>
                                    <p v-for="sku in JSON.parse(item.skus)" v-if="sku.sku_id == item.sku_id">
                                        <!--<span class="color" :style="{'background-color': '#'+sku.sku_feature.color_value}"></span><span v-for="sku_name in sku.properties_name.split(';')">{{sku_name.replace(/(.*?:){3}(.*)/,"$2")}}</span>-->
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="item_makeup_box">
                                <div class="item_makeup">
                                    <p>妆类: {{type2name(item.type)}}</p>
                                    <p>色系:<span class="color" :style="{'background-color': '#'+item.color}"></span>{{item.color}}</p>
                                    <p>颜色: <span class="color" :style="{'background-color': '#'+item.custom_color}"></span>{{item.custom_color}}</p>
                                </div>
                                <div class="item_makeup_tmpls">
                                    <div class="item_makeup_tmpl" v-for="tmpl in item.all_tmpls" v-if="(item.type == 'YX' || item.type == 'SH' || item.type == 'MM' || item.type == 'YY')">
                                        <img :src="tmpl.tmpl_img"/>
                                        <div class="details" >
                                            <p>{{tmpl.tmpl_title}}</p>
                                        </div>
                                        <input type="checkbox" v-model="tmpl.select">
                                    </div>
                                    <div class="item_makeup_tmpl" v-if="(item.type == 'KH' || item.type == 'JM')">
                                        <img :src="item.tmpls[0].tmpl_img"/>
                                        <div class="details" >
                                            <p>{{item.tmpls[0].tmpl_title}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </td>
                        <td>
                            <p><input v-model="item.order_index" type="text"></p>
                        </td>
                        <td><input type="checkbox" v-model="item.hot" v-bind:true-value="1" v-bind:false-value="0"></td>
                        <td>
                            <button class="edit" @click="save(item)">修改</button>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

        <!--<div class="footer">
            <pagination :total-items="items.total"
                        :curr-page="params.pageNo"
                        :size-page="params.pageSize"
                        prev-show="2"
                        next-show="2"
                        @pageChange="pageChange">
            </pagination>
        </div>-->
    </div>
</template>

<script>
    import pagination from 'admin/js/common/pagination.vue';
    import fn from 'admin/js/common/function.js';

    export default {
        props: [''],
        data() {
            return {
                cats: [
                    {
                        name: '全部',
                        type: ''

                    },
                    {
                        name: '唇部',
                        type: 'KH'

                    },
                    {
                        name: '眼线',
                        type: 'YX'

                    },
                    {
                        name: '眉妆',
                        type: 'MM'

                    }
                    ,
                    {
                        name: '眼影',
                        type: 'YY'

                    },
                    {
                        name: '腮红',
                        type: 'SH'

                    },
                    {
                        name: '睫毛',
                        type: 'JM'

                    }
                ],
                params: {
                    keyWord: '',
                    cat: '',
                    pageNo: 1,
                    pageSize: 500
                },
                items: {
                    loading: true,
                    total: 0,
                    list: []
                },
                allTmpls: []
            }
        },
        methods: {
            type2name(type){
                return fn.type2name(type);
            },
            search(){
                this.getItems();
            },
            save(item){
                var self = this;

                var tmpls = [];
                $.map(item.all_tmpls,function(t,i){
                    if(t.select){
                        tmpls.push(t);
                    }
                });

                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.saveMakeup,
                    dataType: 'json',
                    data: {
                        tmpls: JSON.stringify(tmpls),
                        item: JSON.stringify(item)
                    },
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                    }
                });
            },
            pageChange(i){
                var self = this;
                self.params.pageNo = i;
                this.getItems();
                $('.right').scrollTop(0);
            },
            getItems:function(){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getMakeup,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.list;
                            self.items.total = response.data.total;
                            self.items.loading = false;

                            $.map(self.items.list,function(t,i){
                                var json = JSON.stringify(self.allTmpls[t.type]);
                                var obj = JSON.parse(json);

                                t.all_tmpls = obj;

                                $.map(t.all_tmpls,function(tt,ii){
                                    tt.select = false;

                                    var isSelect =  _.findIndex(t.tmpls, function(o) {
                                        return o.tmpl_id == tt.tmpl_id;
                                    });

                                    tt.select = isSelect >= 0? true:false;
                                })
                            });
                        }
                    }
                });
            },
            getMakeupTmpl:function(){
                var self = this;
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getMakeupTmpl,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            var temp_tmpls = [];
                            $.map(response.data.list,function(t,i){

                                if(!temp_tmpls[t.type]){
                                    temp_tmpls[t.type] = [];
                                }

                                t.tmpl_title = t.custom_tmpl_title ? t.custom_tmpl_title : t.tmpl_title;
                                t.tmpl_img = t.custom_tmpl_img ? t.custom_tmpl_img : t.tmpl_img;

                                temp_tmpls[t.type].push(t);
                            });

                            self.allTmpls = temp_tmpls;
                        }
                    }
                });
            },
        },
        created(){
            var self = this;

            self.getMakeupTmpl();
            self.getItems();
        },
        components: {
            pagination
        }
    }
</script>

<style lang="less">
    .set-makeup {
        position: relative;

        .search_box {
            padding: 10px;
            background-color: #f2f2f2;

        }

        .items-list {

            .item {
                display: flex;
                padding-bottom: 5px;

                img {
                    width: 140px;
                    height: 140px;
                }

                .details {
                    padding-left: 10px;
                    text-align: left;
                }

                p {
                    width: 300px;
                    height: 20px;
                    line-height: 20px;
                    overflow: hidden;
                }

                .item_title{
                    height: 40px;
                }

                .color {
                    padding: 1px 9px;
                    margin: 4px;
                }

            }

            .item_makeup_box {

                .color {
                    padding: 1px 9px;
                    margin: 4px;
                }


                .item_makeup {
                    display: flex;

                    p{
                        margin-right: 20px;
                    }
                }

                .item_makeup_tmpls {
                    display: flex;
                    flex-wrap: wrap;
                    min-width:340px;

                    .item_makeup_tmpl{
                        margin-right: 5px;
                        margin-bottom: 5px;
                        width:80px;

                        img {
                            width: 80px;
                        }

                        p {
                            width: 80px;
                            height: 20px;
                            line-height: 20px;
                            overflow: hidden;
                        }
                    }
                }



            }

            td {
                vertical-align: middle;
                text-align: center;
            }

            p input {
                margin-top: 5px;
                width: 80px;
            }

            .operation {
                display:block;
                text-align: left;

                button {
                    margin-bottom: 10px;
                }
            }

        }

    }


</style>